<template>
  <el-card shadow="none" class="content">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="试听记录" name="first">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="学员">
            <el-input
              size="default"
              v-model="input1"
              class="selectStudent"
              placeholder="请选择学员"
              :prefix-icon="Grid"
            />
          </el-form-item>
          <el-form-item label="试听时间">
            <el-date-picker
              size="default"
              v-model="value2"
              type="daterange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
            />
          </el-form-item>
          <el-form-item>
            <el-button size="small">重置</el-button>
            <el-button size="small" type="primary">查询</el-button>
            <span class="more">更多搜索</span>
          </el-form-item>
        </el-form>

        <el-table :data="tableDatas" style="width: 100%" height="auto" border stripe>
          <el-table-column prop="name" label="学生姓名" width="80" />
          <el-table-column prop="tel" label="手机号码" width="100" />
          <el-table-column prop="course" label="试听课程" width="80" />
          <el-table-column prop="class" label="试听课程" width="80" />
          <el-table-column prop="date" label="试听时间" width="200" />
          <el-table-column prop="money" label="支付金额" width="80" />
          <el-table-column prop="teacher" label="上课老师" width="80" />
          <el-table-column prop="chargePerson" label="跟进人" width="80" />
          <el-table-column prop="schoolAdmi" label="学管师" width="80" />
          <el-table-column prop="state" label="状态" width="80">
            <template #default="scope">
              <el-tag
                :type="changeColors(scope.row.state)"
                effect="plain"
                disable-transitions
                >{{ scope.row.state }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="options" label="操作" width="80" fixed="right" />
        </el-table>
        <el-row justify="space-between" align="center" class="bottomPra">
          <el-upload
            :file-list="fileList"
            class="upload-demo"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            multiple
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :limit="3"
            :on-exceed="handleExceed"
          >
            <el-button>导出当前页</el-button>
          </el-upload>
          <el-pagination
            :current-page="currentPage4"
            :page-size="pageSize4"
            :page-sizes="[5, 10, 15, 20]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageTotal"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>
<script setup>
import { ref } from "vue";
import { Grid } from "@element-plus/icons-vue";

const input1 = ref("");
const activeName = ref("first");
//状态颜色
const changeColors = (state) => {
  if (state == "已体验") {
    return "success";
  } else if (state == "已取消") {
    return "warning";
  }
  return "danger";
};

//表单数据
const tableData = [
  {
    name: "朵朵",
    tel: "000****1000",
    course: "篮球班",
    class: "篮球D班",
    date: "2023-03-09(周四) 07:00~08:00",
    money: "-",
    teacher: "合肥蓝海",
    chargePerson: "飞行中心小学",
    schoolAdmi: "飞行中心小学",
    state: "已取消",
    options: "",
  },
  {
    name: "陈小小",
    tel: "765****5678",
    course: "测试课程",
    class: "测试1班",
    date: "2023-03-09(周四) 07:00~08:00",
    money: "-",
    teacher: "合肥蓝海",
    chargePerson: "飞行中心小学",
    schoolAdmi: "飞行中心小学",
    state: "已过期",
    options: "",
  },
  {
    name: "孙学文",
    tel: "189****0058",
    course: "写字课",
    class: "写字班",
    date: "2023-02-15(周三) 07:00~08:00",
    money: "-",
    teacher: "陈",
    chargePerson: "博学培优",
    schoolAdmi: "",
    state: "已过期",
    options: "",
  },
  {
    name: "小小新",
    tel: "138****8000",
    course: "小新1v1",
    class: "一对一试听_小小新",
    date: "2023-01-07(周六) 14:00~17:00",
    money: "0.01",
    teacher: "小新",
    chargePerson: "小新",
    schoolAdmi: "",
    state: "已体验",
    options: "",
  },
  {
    name: "黄佳浩",
    tel: "155****6636",
    course: "绘画课",
    class: "绘画",
    date: "2022-10-21(周五) 07:00~08:00",
    money: "-",
    teacher: "多多教育",
    chargePerson: "紫萤教育",
    schoolAdmi: "",
    state: "已过期",
    options: "",
  },
  {
    name: "朱俊雨",
    tel: "182****7016",
    course: "绘画课",
    class: "绘画",
    date: "2022-10-03(周一) 07:00~08:00",
    money: "-",
    teacher: "多多教育",
    chargePerson: "小王培训",
    schoolAdmi: "",
    state: "已取消",
    options: "",
  },
  {
    name: "卡卡",
    tel: "186****1913",
    course: "写字课",
    class: "写字班",
    date: "2022-10-08(周六) 09:00~12:00",
    money: "-",
    teacher: "陈糖糖",
    chargePerson: "趣学书法",
    schoolAdmi: "",
    state: "已体验",
    options: "",
  },
  {
    name: "金玉",
    tel: "187****8200",
    course: "钢琴一对一",
    class: "钢琴一对一_王",
    date: "2022-09-27(周二) 09:00~10:30",
    money: "-",
    teacher: "美团",
    chargePerson: "测试",
    schoolAdmi: "",
    state: "已过期",
    options: "",
  },
  {
    name: "王一一",
    tel: "134****9123",
    course: "舞蹈课",
    class: "舞蹈",
    date: "2022-09-26(周一) 18:30~20:30",
    money: "-",
    teacher: "小小舞蹈",
    chargePerson: "萌豹",
    schoolAdmi: "",
    state: "已过期",
    options: "",
  },
  {
    name: "小丸子",
    tel: "181****2625",
    course: "羽毛球培训",
    class: "羽毛球",
    date: "2022-09-24(周六) 09:00~12:00",
    money: "-",
    teacher: "新世界羽毛球训练营",
    chargePerson: "体委",
    schoolAdmi: "",
    state: "已过期",
    options: "",
  },
  {
    name: "张欣雨",
    tel: "132****2829",
    course: "英语课",
    class: "英语班",
    date: "2022-08-22(周一) 07:00~08:00",
    money: "-",
    teacher: "王琴",
    chargePerson: "驾车中学",
    schoolAdmi: "",
    state: "已过期",
    options: "",
  },
  {
    name: "同学",
    tel: "157****7772",
    course: "篮球课测试",
    class: "篮球班",
    date: "2022-08-17(周三) 14:00~17:00",
    money: "-",
    teacher: "鲲鹏堂",
    chargePerson: "糖糖",
    schoolAdmi: "",
    state: "已体验",
    options: "",
  },
];

const tableDatas = ref([]);

const currentPage4 = ref(1);
const pageSize4 = ref(10);
const pageTotal = ref(tableData.length);
tableDatas.value = tableData.slice(
  (currentPage4.value - 1) * pageSize4.value,
  currentPage4.value * pageSize4.value
);
console.log(tableDatas.value);

const handleSizeChange = (val) => {
  pageSize4.value = val;
  tableDatas.value = tableData.slice(
    (currentPage4.value - 1) * pageSize4.value,
    currentPage4.value * pageSize4.value
  );
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val) => {
  currentPage4.value = val;
  tableDatas.value = tableData.slice(
    (currentPage4.value - 1) * pageSize4.value,
    currentPage4.value * pageSize4.value
  );
  console.log(`current page: ${val}`);
};

const handleClick = (tab, event) => {
  console.log(tab, event);
};
</script>
<style lang="scss" scoped>
.bottomPra {
  margin-top: 5px;
}
.upload-demo {
  line-height: 42px;
}
::v-deep .el-table__cell {
  height: 60px;
}
::v-deep .is-leaf {
  font-weight: 700;
  height: 35px;
}

.el-table {
  font-size: 12px !important;
}
.el-table-column {
  color: #909399 !important;
  font-weight: 700 !important;
}
.more {
  font-size: 10px;
  color: #1890ff;
  margin-left: 10px;
  &:hover {
    color: #6ab1f8;
  }
}
.el-form-item {
  margin-right: 15px;
}
.selectStudent {
  font-size: 12px;
}
.el-input__wrapper {
  flex-grow: 0 !important;
}
.content {
  margin: 10px 15px;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
